import * as React from "react";
import { useLocation } from "react-router-dom";
import { ListRawState } from "../home";
import { Tabs, Tag, Space } from "react-vant";

const Index: React.FC = () => {
  const location = useLocation();
  const v = location.state as ListRawState;
  return (
    <div>
      <div
        className="list-item"
        style={{
          height: 150,
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-around'
        }}
      >
        <div className="title">
          <h4>{v.title}</h4>
          <span>{v.price}</span>
        </div>
        <Space className="desc">
          {[v.education, ...v.stack].map((v, i) => {
            return <Tag key={i}>{v}</Tag>;
          })}
        </Space>
        <div className="title">
          <h4>{v.name}</h4>
          <span>{v.city}</span>
        </div>
      </div>
    </div>
  );
};

export default Index;
